<template>
  <div class="detail">
    <detail-nav-bar class="detail-nav"></detail-nav-bar>
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      :observeImage="true"
      :observeDOM="true"
    >
      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods-info="goodsInfo"></detail-base-info>
    </scroll>
  </div>
</template>

<script>
import DetailNavBar from "./childComps/DetailNavBar.vue";
import DetailSwiper from "./childComps/DetailSwiper.vue";
import DetailBaseInfo from "./childComps/DetailBaseInfo.vue";

import { getDetail, Goods } from "network/detail.js";
import Scroll from "components/common/scroll/Scroll";
export default {
  name: "Detail",
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    Scroll,
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goodsInfo: {},
    };
  },
  methods: {
    getDeatilData() {
      //1.获取iid
      this.iid = this.$route.query.iid;

      //2.请求详情数据
      getDetail(this.iid).then((res) => {
        //1.获取数据
        const data = res.result;
        //2.取出轮播图数据
        this.topImages = data.itemInfo.topImages;
        //3.创建商品对象（从class中获取）
        this.goodsInfo = new Goods(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );
      });
    },
  },
  created() {
    this.getDeatilData();
  },
};
</script>

<style scoped>
.detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;
}
/* .content {
  background-color: #fff;
  height: calc(100% - 44px);
  overflow: hidden;
} */
.content {
  position: relative;

  bottom: 60px;
  background-color: #fff;
}
.detail-nav {
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>